<?php

use yii\helpers\Html;
use app\modules\Cruise\models\Image;
use kartik\file\FileInput;
?>

<h2 class="page-header"><?= Html::encode($model->name) ?>
    <p class="pull-right">
        <?php

            if($type == 1){
                
                echo Html::a(Yii::t('app', 'Index'), ['index'], ['class' => 'btn btn-danger']);
            }else {//($type == 2){
                echo Html::a(Yii::t('app', 'Index'), ['index','cruise_id'=>$model->cruise_id], ['class' => 'btn btn-danger']);
            }
         ?>
    </p>
</h2>

<div class="row">
    <div class=" col-md-12">
        <?php
            $all = Image::find()->where(['product_id'=>$model->id, 'type'=>$type, 'status'=>1])->orderBy('cover desc')->all();
            $arr = $arr_config = [];
            foreach($all as $key=>$val){
                $image_path = sprintf("%s%s%s", Yii::$app->params['qiniu_path'], $val->path, '?imageView2/1/w/180/h/100/q/85');
                $arr[$key] =  Html::img($image_path,  ['class'=>'file-preiew-image', 'width'=>'200' ]);
                $arr_config[$key]=['caption'=>$val->name, 'url'=>sprintf("/cruise/image/del?id=%d", $val->id),'key'=>$val->id];
            }
            $button1=Html::button('<i class="fa fa-edit" ></i>', ['class'=>'img-name btn btn-xs btn-default', 'title'=>'名称']); 
            $button2=Html::button('<i class="fa fa-support" ></i>',['class'=>'img-cover btn btn-xs btn-default','title'=>'封面']); 
            echo FileInput::widget([
                           'language' => 'zh',
                           'name' => 'Image[path]',
                           //'model' => $img,
                           'id' => 'file-upload',
                           'options' => ['accept' => '', 'multiple'=>true],
                           'pluginOptions' => [
                                'showUpload'  => false,
                                'initialPreview'=> $arr,
                                'initialPreviewConfig' => $arr_config,
                                'showRemove'  => false,
                                'uploadAsync'=> true,
                                'uploadUrl' => \yii\helpers\Url::to(['/site/file-upload', 'type'=>$type, 'product_id'=>$model->id]),
                                'maxFileSize' => 8120,
                                'maxFileCount' => 20,
                                'otherActionButtons' => $button1 . $button2,
                           ]
            ]); 
        ?>
    </div>
</div>



<!-- modal -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">添加图片描述</h4>
      </div>
      <div class="modal-body">
          <input type="text" id="image-name" class="form-control"  value="">
          <input type="hidden" id="image-id" value="">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default btn-primary" data-dismiss="modal">保存</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->



<?php app\components\JsBlock::begin() ?>
<script type="text/javascript">  
    /** 图片自动上传 */
    $('#file-upload').on('filebatchselected', function(event, files) {
        $(this).fileinput("upload");
    });

    $('#file-upload').on('fileuploaded', function(event, data, previewId, index) {
        var form = data.form, files = data.files, extra = data.extra,response = data.response, reader = data.reader;
    });


    // 指定封面图片
    $(".img-cover").on("click", function() {
        var key = $(this).siblings('button').data('key');
        // ajax 修改img active
        $.get("/cruise/image/cover",{'id':key}, function(data){
            if(data){
            
                alert('封面指定成功');
            }
        });
    });

    // 添加图片描述
    $(".img-name").on("click", function() {
        var key = $(this).siblings('button').data('key');
        $("#image-id").val(key);
        $('#myModal').modal();
    });

    $('#myModal').on('hide.bs.modal', function () {
           var id= $("#image-id").val(); 
           var name = $("#image-name").val(); 
           // ajax 修改img 类型 
           $.get("/cruise/image/add-name",{'id':id, 'name':name}, function(data){
               // $(".file-footer-caption").text(name); 
           });
    });
</script>
<?php app\components\JsBlock::end() ?>
